<template>
  <el-card class="position-list-card">
    <h2>岗位管理</h2>
    <el-button type="primary" class="mb-2" @click="goPublish">发布新岗位</el-button>
    <el-table :data="positions" stripe border class="position-table" v-loading="loading">
      <el-table-column prop="positionName" label="岗位名称" min-width="120" />
      <el-table-column prop="responsibility" label="岗位职责" min-width="180" />
      <el-table-column prop="requirement" label="任职要求" min-width="180" />
      <el-table-column prop="salaryRange" label="薪资范围" min-width="100" />
      <el-table-column prop="workLocation" label="工作地点" min-width="100" />
      <el-table-column prop="recruitmentNum" label="招聘人数" min-width="80" />
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="{ row }">
          <el-tag :type="statusTagType(row.status)">{{ statusMap[row.status] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="goEdit(row.id)">编辑</el-button>
          <el-button type="danger" size="small" @click="onDelete(row.id)">废除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-bar">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="onPageChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getEnterprisePositions,
  deletePosition
} from '@/api/enterprise'

const router = useRouter()
const positions = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = 10
const loading = ref(false)
const statusMap = {
  PUBLISHED: '已发布',
  DEPRECATED: '已废除'
}
const statusTagType = status => {
  if (status === 'PUBLISHED') return 'success'
  if (status === 'DEPRECATED') return 'info'
  return ''
}
const allPositions = ref([])
const fetchPositions = async () => {
  loading.value = true
  try {
    const res = await getEnterprisePositions({})
    const data = res.data || res
    allPositions.value = data.list || data.records || []
    total.value = allPositions.value.length
    const start = (page.value - 1) * pageSize
    const end = start + pageSize
    positions.value = allPositions.value.slice(start, end)
  } catch (e) {}
  loading.value = false
}
const onPageChange = p => {
  page.value = p
  const start = (page.value - 1) * pageSize
  const end = start + pageSize
  positions.value = allPositions.value.slice(start, end)
}
const goEdit = id => {
  router.push(`/enterprise/position/${id}`)
}
const goPublish = () => {
  router.push('/enterprise/position/publish')
}
const onDelete = id => {
  ElMessageBox.confirm('确定要废除该岗位吗？', '提示', { type: 'warning' })
    .then(async () => {
      await deletePosition(id)
      ElMessage.success('岗位已废除')
      fetchPositions()
    })
    .catch(() => {})
}
onMounted(() => {
  fetchPositions()
})
</script>

<style scoped>
.position-list-card {
  width: 100%;
  margin: 0;
  padding: 32px 32px 0 32px;
  box-sizing: border-box;
}
.mb-2 {
  margin-bottom: 16px;
}
.position-table {
  margin-bottom: 20px;
}
.pagination-bar {
  text-align: right;
  margin-top: 10px;
}
</style> 